import { useState } from "react";
import {
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from "react-native";
import { SvgIcon } from "../ui/SvgIcon";

// IT 分类贴纸
import usb_stick from '@/assets/stickers/IT/1_usb_stick.svg';
import sliders from '@/assets/stickers/IT/2_sliders.svg';
import email from '@/assets/stickers/IT/3_email.svg';
import code_window from '@/assets/stickers/IT/4_code_window.svg';
import bell from '@/assets/stickers/IT/5_bell.svg';

// Life 分类贴纸
import sneaker from '@/assets/stickers/Life/1_sneaker.svg';
import heels from '@/assets/stickers/Life/2_heels.svg';
import cup from '@/assets/stickers/Life/3_cup.svg';
import trumpet from '@/assets/stickers/Life/4_trumpet.svg';
import glasses from '@/assets/stickers/Life/5_glasses.svg';

// Nature 分类贴纸
import cat from '@/assets/stickers/Nature/1_cat.svg';
import dog from '@/assets/stickers/Nature/2_dog.svg';
import fish from '@/assets/stickers/Nature/3_fish.svg';
import flower from '@/assets/stickers/Nature/4_flower.svg';
import beach from '@/assets/stickers/Nature/5_beach.svg';

// Shapes 分类贴纸
import circle from '@/assets/stickers/Shapes/1_circle.svg';
import triangles from '@/assets/stickers/Shapes/2_triangles.svg';
import hearts from '@/assets/stickers/Shapes/3_hearts.svg';
import flower_shape from '@/assets/stickers/Shapes/4_flower.svg';
import vase from '@/assets/stickers/Shapes/5_vase.svg';

// 分类标签数据
const CATEGORIES = [
  { id: "all", name: "全部" },
  { id: "it", name: "IT" },
  { id: "life", name: "生活" },
  { id: "nature", name: "自然" },
  { id: "shapes", name: "形状" },
];

// 贴纸数据
const STICKER_CATEGORIES: Record<string, any[]> = {
  all: [
    { key: "usb_stick", label: "U盘", icon: usb_stick },
    { key: "sneaker", label: "运动鞋", icon: sneaker },
    { key: "cat", label: "猫咪", icon: cat },
    { key: "circle", label: "圆形", icon: circle },
  ],
  it: [
    { key: "usb_stick", label: "U盘", icon: usb_stick },
    { key: "sliders", label: "滑块", icon: sliders },
    { key: "email", label: "邮件", icon: email },
    { key: "code_window", label: "代码", icon: code_window },
    { key: "bell", label: "铃铛", icon: bell },
  ],
  life: [
    { key: "sneaker", label: "运动鞋", icon: sneaker },
    { key: "heels", label: "高跟鞋", icon: heels },
    { key: "cup", label: "杯子", icon: cup },
    { key: "trumpet", label: "喇叭", icon: trumpet },
    { key: "glasses", label: "眼镜", icon: glasses },
  ],
  nature: [
    { key: "cat", label: "猫咪", icon: cat },
    { key: "dog", label: "狗狗", icon: dog },
    { key: "fish", label: "鱼", icon: fish },
    { key: "flower", label: "花", icon: flower },
    { key: "beach", label: "海滩", icon: beach },
  ],
  shapes: [
    { key: "circle", label: "圆形", icon: circle },
    { key: "triangles", label: "三角形", icon: triangles },
    { key: "hearts", label: "心形", icon: hearts },
    { key: "flower_shape", label: "花形", icon: flower_shape },
    { key: "vase", label: "花瓶", icon: vase },
  ],
};

interface StickerEditorProps {
  onStickerSelect?: (sticker: any) => void;
}

export default function StickerEditor({ onStickerSelect }: StickerEditorProps) {
  const [selectedCategory, setSelectedCategory] = useState<string>("all");

  // 获取当前分类的贴纸列表
  const getCurrentStickers = () => {
    return STICKER_CATEGORIES[selectedCategory] || STICKER_CATEGORIES.all;
  };

  // 处理分类选择
  const handleCategorySelect = (categoryId: string) => {
    setSelectedCategory(categoryId);
  };

  // 处理贴纸选择
  const handleStickerSelect = (sticker: any) => {
    console.log("选择贴纸:", sticker);
    onStickerSelect?.(sticker);
  };

  return (
    <View style={styles.container}>
      {/* 分类标签栏 */}
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        style={styles.categoryScroll}
        contentContainerStyle={styles.categoryContent}
      >
        {CATEGORIES.map((category) => (
          <TouchableOpacity
            key={category.id}
            style={styles.categoryItem}
            onPress={() => handleCategorySelect(category.id)}
          >
            <Text
              style={[
                styles.categoryText,
                selectedCategory === category.id && styles.categoryTextSelected,
              ]}
            >
              {category.name}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>

      {/* 贴纸列表 */}
      <ScrollView
        showsVerticalScrollIndicator={false}
        style={styles.stickerList}
        contentContainerStyle={styles.stickerListContainer}
      >
        <View style={styles.stickerGrid}>
          {getCurrentStickers().map((sticker) => (
            <TouchableOpacity
              key={sticker.key}
              style={styles.stickerItem}
              onPress={() => handleStickerSelect(sticker)}
            >
              <View style={styles.stickerPreview}>
                <SvgIcon Icon={sticker.icon} size={40} color="#000" />
              </View>
              <Text style={styles.stickerLabel}>{sticker.label}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
  },
  categoryScroll: {
    flexGrow: 0,
  },
  categoryContent: {
    paddingHorizontal: 16,
  },
  categoryItem: {
    marginRight: 24,
  },
  categoryText: {
    fontSize: 14,
    color: "#999",
    fontWeight: "400",
  },
  categoryTextSelected: {
    color: "#222",
    fontWeight: "400",
  },
  stickerList: {
    backgroundColor: "#fff",
    maxHeight: 300,
  },
  stickerListContainer: {
    paddingHorizontal: 10,
    paddingTop: 12,
  },
  stickerGrid: {
    flexDirection: "row",
    flexWrap: "wrap",
  },
  stickerItem: {
    alignItems: "center",
    width: "20%",
    marginBottom: 16,
  },
  stickerPreview: {
    width: 60,
    height: 60,
    borderRadius: 8,
    backgroundColor: "#f5f5f5",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 8,
    position: "relative",
  },
  stickerLabel: {
    fontSize: 12,
    color: "#666",
    textAlign: "center",
  },
});